<template>
	<view>
		<up-gap height="5"></up-gap>
		<up-tabs :list="tabs" lineWidth="100" itemStyle="padding-left: 15px; padding-right: 15px; height: 45px; backgroundColor:#FFFFFF"
			:scrollable="false" style="box-sizing: border-box;"></up-tabs>
		<!--课程相关-->
		<view>
			<view class="container">
				<view style="display: flex; background-color: #FFFFFF;">
					<view style="flex: 1;"><up-input placeholer="课程名称" prefixIcon="search" shape="circle"></up-input>
					</view>
					<view class="mt5 ml10"><up-button icon="plus" size="mini" type="primary"
							@click="handleCreateCourse">创建课程</up-button></view>
				</view>
			</view>

			<view style="background-color: #FFFFFF;" class="container" v-for="(item,index) in courses" :key="index" @click="handleDetail(index,item)">
				<view style="display: flex;" class="pt5">
					<view style="flex: 1; font-size: 16px;font-weight: bold;">{{item.title}}</view>
					<view style="padding: 5px;"><u-icon name="more-dot-fill" size="20"></u-icon></view>
				</view>
				<view style="display: flex;" class="pb5">
					<view class="mr5"><up-tag text="班级课程" plain border="none" size="mini"></up-tag></view>
					<view class="mr5"><up-tag text="按课时" plain border="none" size="mini"></up-tag></view>
					<view class="mr5"><up-tag text="体验课" plain type="warning" border="none" size="mini"></up-tag></view>
				</view>
			</view>
		</view>




	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: [{
					name: '课程'
				}, {
					name: "教学用品"
				}],
				courses: [{
						id: 1,
						title: "中国舞",
						type: '按课时',
						istrial: 1,
						soldcount: 12,
						updatetime: '2025-01-22 10:11:23'
					},
					{
						id: 1,
						title: "民族舞",
						type: '按课时',
						istrial: 1,
						soldcount: 12,
						updatetime: '2025-01-22 10:11:23'
					}
				]
			}
		},
		methods: {
			handleCreateCourse() {
				uni.navigateTo({
					url: "/pages/course/create"
				})
			},
			handleDetail(index, item) {
				uni.navigateTo({
					url: "/pages/course/detail?id=" + item.id
				})
			}
		}
	}
</script>

<style>

</style>